<template>
  <section class="top" id="details" v-loading="loading">
    <!--banner-->
    <div class="plan_banner" v-if="preview" :style="{background: 'url('+preview.productImg+') right no-repeat',backgroundSize: 'cover'}">
      <div class="main-width cl">
        <div class="plan_text details_text">
          <h4 class="details_title  slideInUp animated">{{preview.productName}}</h4>
          <p class=" slideInUp animated">{{preview.productSlogan}}</p>
          <router-link
            :to="'solution-detail?id=' + preview.solutionId" class="layer_btn rubberBand animated">解决方案</router-link>
        </div>
        <img v-if="preview.productRightImg" v-lazy="baseURL + preview.productRightImg[0]" :key="preview.productRightImg[0]" class="mac"/>
      </div>
    </div>
    <!--精心打造的功能优势-->
    <div class="main-width experienceAddr" v-if="query.productId == 32">
      <p><span>体验地址：http://madata.cn:5465/mda/vision/index.jsp</span><span>账号：manager</span><span>密码：123456</span></p>
    </div>
    <div v-loading="loadIntroduce">
      <div class="product_advantage product" id="#adv1">
        <div class="main-width">
          <h1 class="content_region_title" v-if="preview && preview.productFrameTitle">{{preview.productFrameTitle}}</h1>
          <ul class="advantage_list cl" >
            <li v-for="item in introduceData" v-if="item.introduceType === 1"><a href="javascript:;">
              <h2>{{item.introduceTitle}}</h2>
              <div class="advantage_img" v-if="item.introduceImg.length > 0">
                <img v-lazy="baseURL + item.introduceImg[0]"  :key="item.introduceImg[0]" class="adv_img"/>
                <img v-if="item.introduceImg.length > 1" v-lazy="baseURL + item.introduceImg[1]" :key="item.introduceImg[1]" class="adv_img1"/>
              </div>
              <i></i>
            </a>
              <div class="advantage_text">{{item.introduceRemark}}</div></li>
          </ul>
        </div>
      </div>
      <!--典型应用场景-->
      <div class="product_scene product" id="#adv2">
        <div class="main-width">
          <h1 class="content_region_title" v-if="preview && preview.productSceneTitle">{{preview.productSceneTitle}}</h1>
          <div class="tab_carousel">
            <ul >
              <li
                v-for="item in introduceData"
                v-if="item.introduceType === 2"
                @click="curId = item.introduceId"
                :class="{'active':curId === item.introduceId}"
                v-text="item.introduceTitle"></li>
            </ul>
          </div>
          <div class="stage_carousel" v-for="detail in introduceData" v-if="curId === detail.introduceId">
              <div class="stage cl" style="left: 0;">
                <div class="stage_item">
                  <h4>{{detail.introduceTitle}}</h4>
                  <p>{{detail.introduceRemark}}</p>
                </div>
                <img v-lazy="baseURL + detail.introduceImg[0]" :key="detail.introduceImg[0]" class="ticket" v-if="detail.introduceImg.length > 0"/>
              </div>
          </div>
        </div>
      </div>
      <!--计费说明-->
      <section id="#adv3">
      <div class="product_advantage product"
           v-for="(detail, index) in introduceData"
           v-if="detail.introduceType === 3">
        <div class="main-width">
          <h1 class="content_region_title">{{detail.introduceTitle}}</h1>
          <div class="cost" :style="{height: isShow ? 'auto' : '437px'}" v-if="detail.introduceImg.length > 0">
            <img v-lazy="baseURL + detail.introduceImg[0]" :key="detail.introduceImg[0]"/>
          </div>
          <a href="javascript:;" :class="isShow ? 'active' : ''" class="more" id="more" @click="handleMore">查看更多<i></i></a>
        </div>
      </div>
    </section>
    </div>
    <Footer @goDetails="goDetails"/>
  </section>
</template>

<script>
  import detailJs from './detailJs'
  export default detailJs
</script>
